<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-05-07 22:16:08
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-05-07 22:40:15
 * @FilePath: /free-learning/src/views/consultant-review/consultant-review-audit/index.vue
 * @Description: 咨询师评价审核页面
-->
<template>
  <div class="consultant-review-audit">
    <div class="page-header">
      <h1>咨询师评价审核</h1>
    </div>

    <!-- 搜索表单 -->
    <div class="search-card">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="咨询师">
          <el-input v-model="searchForm.consultantName" placeholder="请输入咨询师姓名" />
        </el-form-item>
        <el-form-item label="评价状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="待审核" :value="0" />
            <el-option label="已通过" :value="1" />
            <el-option label="已拒绝" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 评价列表 -->
    <div class="review-card">
      <el-table :data="reviewList" border>
        <el-table-column prop="consultantName" label="咨询师" min-width="120" />
        <el-table-column prop="nickName" label="评价用户" min-width="150">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :size="30" :src="row.avatar" />
              <span>{{ row.nickName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rating" label="评分" min-width="200">
          <template #default="{ row }">
            <my-rate :model-value="String(row.rating)" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="评价内容" min-width="200" show-overflow-tooltip />
        <el-table-column prop="reviewTime" label="评价时间" min-width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" effect="light">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.status === 0" type="primary" link @click="handleAudit(row, 1)">
              通过
            </el-button>
            <el-button v-if="row.status === 0" type="danger" link @click="handleAudit(row, 2)">
              拒绝
            </el-button>
            <el-button type="primary" link @click="showAuditHistory(row)">审核记录</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="page.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="auditDialogVisible"
      :title="auditType === 1 ? '通过审核' : '拒绝审核'"
      width="500px"
      destroy-on-close
    >
      <el-form :model="auditForm">
        <el-form-item label="审核意见" :rules="[{ required: true, message: '请输入审核意见' }]">
          <el-input
            v-model="auditForm.auditInfo"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit">确认</el-button>
      </template>
    </el-dialog>

    <!-- 审核历史对话框 -->
    <el-dialog v-model="historyDialogVisible" title="审核历史" width="600px" destroy-on-close>
      <el-timeline>
        <el-timeline-item
          v-for="item in auditHistory"
          :key="item.id"
          :timestamp="item.auditTime"
          :type="getTimelineType(item.status)"
        >
          <div class="audit-history-item">
            <p class="auditor">审核人：{{ item.auditorName }}</p>
            <p class="status">状态：{{ getStatusText(item.status) }}</p>
            <p class="opinion">审核意见：{{ item.opinion }}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import * as consultantReviewApi from "@/api/consultant_review";
import type { ConsultantReview } from "@/api/consultant_review/type";
import type { CourseReviewAuditHistory } from "@/api/review/course-review/type";
import MyRate from "@/layout/components/MyRate.vue";

defineOptions({
  name: "ConsultantReviewAudit",
});

// 搜索表单
const searchForm = reactive({
  consultantName: "",
  status: "",
  current: 1,
  size: 10,
});

// 分页数据
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});

// 评价列表
const reviewList = ref<ConsultantReview[]>([]);

// 审核相关
const auditDialogVisible = ref(false);
const auditType = ref(1); // 1: 通过, 2: 拒绝
const currentReview = ref<ConsultantReview>();
const auditForm = reactive({
  auditInfo: "",
});

// 审核历史
const historyDialogVisible = ref(false);
const auditHistory = ref<CourseReviewAuditHistory[]>([]);

// 获取评价列表
const getReviewList = async () => {
  try {
    const res = await consultantReviewApi.page({
      ...searchForm,
      current: page.current,
      size: page.size,
    });
    reviewList.value = res.records || [];
    page.total = res.total || 0;
  } catch (error) {
    ElMessage.error("获取评价列表失败");
  }
};

// 搜索
const handleSearch = () => {
  page.current = 1;
  getReviewList();
};

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    consultantName: "",
    status: "",
    current: 1,
    size: 10,
  });
  getReviewList();
};

// 分页操作
const handleSizeChange = (val: number) => {
  page.size = val;
  getReviewList();
};

const handleCurrentChange = (val: number) => {
  page.current = val;
  getReviewList();
};

// 审核操作
const handleAudit = async (row: ConsultantReview, type: number) => {
  if (type === 2) {
    auditType.value = type;
    currentReview.value = row;
    auditForm.auditInfo = "";
    auditDialogVisible.value = true;
  } else if (type === 1) {
    await consultantReviewApi.audit({
      ...row,
      status: type,
      auditInfo: "审核通过",
    });
    ElMessage.success("审核成功");
    getReviewList();
  }
};

const submitAudit = async () => {
  if (!auditForm.auditInfo) {
    ElMessage.warning("请输入审核意见");
    return;
  }

  try {
    await consultantReviewApi.audit({
      ...currentReview.value!,
      status: auditType.value,
      auditInfo: auditForm.auditInfo,
    });
    ElMessage.success("审核成功");
    auditDialogVisible.value = false;
    getReviewList();
  } catch (error) {
    ElMessage.error("审核失败");
  }
};

// 查看审核历史
const showAuditHistory = async (row: ConsultantReview) => {
  try {
    auditHistory.value = await consultantReviewApi.auditList(row.id);
    historyDialogVisible.value = true;
  } catch (error) {
    ElMessage.error("获取审核历史失败");
  }
};

// 状态相关
const getStatusType = (status: number): "warning" | "success" | "danger" => {
  const map: Record<number, "warning" | "success" | "danger"> = {
    0: "warning",
    1: "success",
    2: "danger",
  };
  return map[status];
};

const getTimelineType = (status: number): "warning" | "success" | "danger" => {
  return getStatusType(status);
};

const getStatusText = (status: number) => {
  const map: Record<number, string> = {
    0: "待审核",
    1: "已通过",
    2: "已拒绝",
  };
  return map[status];
};

onMounted(() => {
  getReviewList();
});
</script>

<style lang="scss" scoped>
.consultant-review-audit {
  padding: 20px;

  .page-header {
    margin-bottom: 20px;
    h1 {
      font-size: 24px;
      font-weight: 500;
      margin: 0;
    }
  }

  .search-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .search-form {
      margin-bottom: 0;
    }
  }

  .review-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .audit-history-item {
    .auditor {
      font-weight: 500;
      margin-bottom: 8px;
    }
    .status {
      margin-bottom: 8px;
    }
    .opinion {
      color: #666;
    }
  }
}
</style>
